import {useRef, useState} from "react";
import type {DraggableData, DraggableEvent} from "react-draggable";

export default function useDraggable () {
    // 拖拽对象
    const draggleRef = useRef<HTMLDivElement>(null);
    //拖拽位置
    const [bounds, setBounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 });
    // 拖拽控制
    const [disabled, setDisabled] = useState(true);

    const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
        const { clientWidth, clientHeight } = window.document.documentElement;
        const targetRect = draggleRef.current?.getBoundingClientRect();
        if (!targetRect) {
            return;
        }
        setBounds({
            left: -targetRect.left + uiData.x,
            right: clientWidth - (targetRect.right - uiData.x),
            top: -targetRect.top + uiData.y,
            bottom: clientHeight - (targetRect.bottom - uiData.y),
        });
    };

    return {
        draggleRef,
        bounds,
        disabled,
        setDisabled,
        onStart,
        setBounds
    }
}